<template>
  <div>
    <el-card>
      <div slot="header">
        <span>编辑资料</span>
      </div>
      <el-empty v-if="!userinfoForm" description="空空如也！" style="height: 615px;"></el-empty>
      <div class="myinfo" v-else>
        <div class="imgPositon">
          <el-image :src="url" fit="fit"></el-image>
          <el-avatar :size="118" :src="this.userinfoForm.headsrc"></el-avatar>
          <el-link type="primary">修改头像</el-link>
          <el-button type="warning" round size="mini" @click="showPendant()">更换头像挂件</el-button>
        </div>
        <el-form ref="userinfoRef" :model="userinfoForm" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="userinfoForm.username"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userinfoForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="userinfoForm.mobile" placeholder="请输入手机号" class="mobl_sty"></el-input>
            <el-button @click="getCode()" type="primary" v-if="btnVisible === true">获取验证码</el-button>
            <el-button plain disabled v-else>{{ this.codeTest }}</el-button>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userinfoForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="签名" prop="sing">
            <el-input type="textarea" placeholder="系统原装签名，送给每一位小可爱" v-model="userinfoForm.sing" maxlength="48" show-word-limit> </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 更换挂件显示框 -->
    <el-dialog title="头像挂件" :visible.sync="pendantVisible" width="50%" :before-close="handleClose">
      <div>
        <el-image :src="url" fit="fit"></el-image>
        <el-avatar :size="118" :src="this.userinfoForm.headsrc"></el-avatar>
        <p>原生公测纪念</p>
        <p>通过参与「新手冒险指南]活动或在米游社游戏中心预约原神获得</p>
      </div>
      <AvatarFrame></AvatarFrame>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pendantVisible = false">取 消</el-button>
        <el-button type="primary" @click="pendantVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AvatarFrame from './AvatarFrame'
export default {
  data () {
    return {
      url: require('../../../public/image/touxiangkuang.png'),
      userinfoForm: {
        id: 0,
        username: '',
        headsrc: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        sex: '',
        sign: '',
        phone: '',
        email: '',
        password: '',
        sing: ''
      },
      // 挂件显示与隐藏属性
      pendantVisible: false,
      // 图片数据
      imageList: 0,
      // 验证码倒计时秒
      auth_time: 60,
      // 定时器名称
      sms_timer: '',
      codeTest: '获取验证码',
      btnVisible: true
    }
  },
  created () {},
  // DOM对象加载完成时
  mounted () {},
  methods: {
    showPendant () {
      this.pendantVisible = true
    },
    handleClose (done) {
      // 关闭窗口
      done()
    },
    load () {
      this.imageList += 2
    },
    // 验证码倒计时
    getCode () {
      clearTimeout(this.sms_timer)
      this.sms_timer = setInterval(() => {
        this.btnVisible = false
        this.codeTest = this.auth_time + '秒后重新获取'
        this.auth_time--
        if (this.auth_time < 1) {
          clearTimeout(this.sms_timer)
          this.btnVisible = true
          this.auth_time = 60
          this.codeTest = '获取验证码'
        }
      }, 1000)
    }
  },
  computed: {},
  components: { AvatarFrame },
  name: 'userArticle'
}
</script>

<style lang="less" scoped>
.imgPositon {
  position: relative;
  height: 170px;
  .el-image {
    position: absolute;
    width: 152px;
    height: 152px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .el-avatar {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
  .el-link {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, -50%);
  }
  .el-button {
    position: absolute;
    left: 62%;
  }
}
.el-dialog {
  div {
    height: 225px;
    position: relative;
    :nth-child(3) {
      position: absolute;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%);
    }
    :nth-child(4) {
      position: absolute;
      width: 340px;
      left: 50%;
      top: 80%;
      transform: translate(-50%, -50%);
      color: rgb(214, 214, 214);
      font-size: 12px;
    }
  }
  .el-image {
    position: absolute;
    width: 152px;
    height: 152px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .el-avatar {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
}
.mobl_sty {
  width: 400px;
  margin-right: 10px;
}
</style>
